<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Widget - Default functionality</title>

    <script src="__STATIC__/js/jquery-1.10.2.min.js"></script>
    <script src="__STATIC__/js/jquery-ui-1.10.3.custom.min.js"></script>

    <style>
        .custom-colorize {
            font-size: 20px;
            position: relative;
            width: 75px;
            height: 75px;
        }
        .custom-colorize-changer {
            font-size: 10px;
            position: absolute;
            right: 0;
            bottom: 0;
        }
    </style>
    <script>
        $(function() {
            // the widget definition, where "custom" is the namespace,
            // "colorize" the widget name
            $.widget( "custom.navmenu", {
                // default options
                options: {
                    url: null
                },

                // the constructor
                _create: function() {
                    //this.text(this.options.url);
                    //this.text(this.options.url);
                    var self=this;

                    $.ajax({
                        type: 'POST',
                        url:self.options.url,
                        cache: false,
                        beforeSend:function(){
                            self.element.text("loading......");
                        },
                        success:function(data){
                            self.element.addClass("nav nav-list").text("");
                            $.each(data, function(i, menu) {
                                var li=$("<li></li>");
                                if(i==0){
                                    li.addClass("active");
                                }
                                li.append($("<a></a>").append('<i class="icon-dashboard"></i>').append('<span class="menu-text"> '+menu.name+' </span>'));
                                self.getsubmenu(menu.son,li);

                                self.element.append(li);
                            });

                        }
                    });

                },
                getsubmenu:function(data,li){
                    var self = this;
                    if(data){
                        li.find("a").append('<b class="arrow icon-angle-down"></b>');
                        li.append($('<ul class="submenu"></ul>'));
                        $.each(data, function(j, submenu) {
                            var subli=$("<li></li>");

                            subli.append("<a href='"+submenu.url+"'></a>");
                            subli.find("a").append('<i class="icon-double-angle-right"></i>'+submenu.text);
                            li.find("ul").append(subli);
                            self.getsubmenu(data.son,li);
                        });
                    }
                }


            });

            // initialize with default options    
            $( "#my-widget1" ).navmenu({url:"<{:U('Index/public_menuLeft')}>"});


        });
    </script>
</head>

<body>
<div>
    <ul id="my-widget1">color me</ul>

</div>
</body>
</html>